{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/layer.min.js' %}"></script>
    <script src="{% static 'js/sweetalert.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap/js/bootstrap.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.min.css' %}">
    <script src="{% static 'plugins/layui/layui/layui.js' %}"></script>
    <link rel="stylesheet" href="{% static 'plugins/layui/layui/css/layui.css' %}">
    {% block css %}

    {% endblock %}
</head>
<body>
{# 导航条开始 #}
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{% url 'home' %}">BBS</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">闪存 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">新闻</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">发现 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">博客园</a></li>
                        <li><a href="#">CSDN</a></li>
                        <li><a href="#">掘金</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            {# 百度搜索框 #}
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="开心一下~~~" id="search_key">
                </div>
                <button type="submit" class="btn btn-default" id="btn_search">百度一下</button>
            </form>
            {# 百度搜索框 #}
            <ul class="nav navbar-nav navbar-right">
                {% if request.user.is_authenticated %}
                    {# 登录成功的用户：显示用户名和用户头像和用户身份 #}
                    {# 显示用户头像 #}
                    <li><img src="/media/{{ request.user.avatar }}/" alt="" class="img-circle"
                             style="height: 50px;width: 50px;"></li>
                    {# 显示用户名及下拉框 #}
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">
                            {{ request.user.username }}
                            {# 区分管理员和普通用户 #}
                            [
                            {% if request.user.is_superuser %}
                                管理员
                            {% else %}
                                用户
                            {% endif %}
                            ]
                            <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a data-toggle="modal" data-target="#set_password_modal">修改密码</a></li>
                            <li><a href="#">修改头像</a></li>
                            <li><a href="{% url 'backend' %}">个人后台</a></li>
                            <li><a href="{% url 'adv_detail' %}">添加广告</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="{% url 'logout' %}">注销登录</a></li>
                        </ul>
                    </li>
                {% else %}
                    {# 没有登录成功的用户：显示登陆和注册 #}
                    <li><a href="{% url 'register' %}">注册</a></li>
                    <li><a href="{% url 'login' %}">登录</a></li>
                {% endif %}
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
{# 导航条结束 #}

{# 修改密码模态框 #}
<!-- Large modal -->
{# 点击按钮的两个主要参数  data-toggle="modal" data-target="#set_password_modal" #}
{# data-target ：可以是模态框的类属性值也可以是ID属性值，为了区分每一个模态框，建议使用ID值 #}
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="set_password_modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div class="modal-header">
                {# 右上角的关闭标签 #}
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                {# 主标题 #}
                <h4 class="modal-title text-center" id="myLargeModalLabel">修改密码</h4>
            </div>
            <div class="modal-body">
                <form id="form_set_password">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="inputUsername">用户名 : </label>
                        <input type="text" id="inputUsername" name="username" class="form-control"
                               value="{{ request.user.username }}" disabled>
                    </div>
                    <div class="form-group">
                        <label for="old_password">旧密码 : </label>
                        <input type="password" id="old_password" name="old_password" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="new_password">新密码 : </label>
                        <input type="password" id="new_password" name="new_password" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="confirm_password">确认密码 : </label>
                        <input type="password" id="confirm_password" name="confirm_password" class="form-control">
                    </div>
                    <p><input type="button" class="btn btn-success btn-block" value="修改密码" id="set_password_btn">
                    </p>
                </form>
            </div>
        </div>
    </div>
</div>
{# 修改密码模态框 #}

{% block content_outer %}
    {# 主体内容部分 #}
    <div class="container-fluid">
        <div class="row">
            {# 左侧的广告栏 #}
            <div class="col-md-2">
                {# 使用 inclusion_tag #}
                {# 【一】加载inclusion_tag  #}
                {% load CommonInclusionTags %}
                {# 【二】使用inclusion_tag #}
                {% home_adv %}
            </div>
            {# 中间部分放所有用户的文章内容 #}
            <div class="col-md-8">
                {% block content_main %}
                    {# 遍历循环的是已经切割过后的数据而不是 原始的数据  #}
                    {# {% for article_obj in article_data %} #}
                    {% for article_obj in page_queryset %}
                        <h4 class="media-heading"><a
                                href="{% url 'article_detail' article_obj.blog.site_name  article_obj.pk %}">{{ article_obj.title }}</a>
                        </h4>
                        <div class="media">
                            <div class="media-left">
                                <a href="#">
                                    {# 获取到当前文章对象对应的用户头像： 文章表和个人站点绑定，个人站点又和用户绑定 #}
                                    <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                                         src="/media/{{ article_obj.blog.userinfo.avatar }}/"
                                         data-holder-rendered="true"
                                         style="width: 64px; height: 64px;">
                                </a>
                            </div>
                            <div class="media-body">
                                {{ article_obj.desc }}
                            </div>
                            <br>
                            <div class="media-bottom">
                                <a href="/{{ article_obj.blog.userinfo.username }}/"
                                   style="margin-right: 10px">{{ article_obj.blog.userinfo.username }}</a>
                                <span style="margin-right: 10px">{{ article_obj.create_time|date:"Y-m-d H:i:s" }}</span>
                                <a href=""><span class="glyphicon glyphicon-thumbs-up"
                                                 style="margin-right: 10px">{{ article_obj.up_num }}</span></a>
                                <a href=""><span class="glyphicon glyphicon-thumbs-down"
                                                 style="margin-right: 10px">{{ article_obj.down_num }}</span></a>
                                <a href=""> <span class="glyphicon glyphicon-comment"
                                                  style="margin-right: 10px">{{ article_obj.comment_num }}</span></a>
                            </div>
                        </div>
                        <hr>
                    {% endfor %}
                    <div class="text-center">
                        {{ page_obj.page_html|safe }}
                    </div>
                {% endblock %}
            </div>
            {# 右侧的广告栏 #}
            <div class="col-md-2">
                {# 使用 inclusion_tag #}
                {# 【一】加载inclusion_tag  #}
                {% load CommonInclusionTags %}
                {# 【二】使用inclusion_tag #}
                {% home_adv %}
            </div>
        </div>
    </div>
    {# 主体内容部分 #}

{% endblock %}

<script>
    $(document).ready(
        // 修改密码事件
        $("#set_password_btn").click(function () {
            let data = {};
            // each 方法 值 form表单的数组
            $.each($("#form_set_password").serializeArray(), (index, dataDict) => {
                data[dataDict.name] = dataDict.value;
            })
            // 发送Ajax请求
            $.ajax({
                url: "{% url 'change_password' %}",
                type: "POST",
                data: data,
                success: (response) => {
                    // 回调函数处理逻辑
                    if (response.code === 2000) {
                        swal({
                            title: response.message,
                            icon: "success",
                            button: true,
                        }).then(() => {
                            window.location.href = response.next_url;
                        });
                    } else {
                        swal({
                            title: response.errors,
                            icon: "error",
                            button: true,
                        }).then(() => {
                            window.location.reload()
                        });
                    }
                }
            })
        }),


        // [2]给搜索按钮绑定点击事件
        $("#btn_search").click(function (event) {
            // 点击搜索框跳转到百度搜索
            // [1]定义一个搜索函数
            function searchBaiDu() {
                // （1）获取到用户输入的关键字
                let ketWord = $("#search_key").val();
                // （2）构造跳转链接
                let newUrl = "https://www.baidu.com/s?" + "wd" + "=" + ketWord
                // （3）打开新窗口跳转到指定地址
                window.open(newUrl, "_blank");
            }

            // （1）阻止 submit 按钮的自动提交事件
            event.preventDefault();
            // （2）调用上面写好的函数
            searchBaiDu();
        }),
    )
</script>
</body>
</html>